<template>
  <van-tabbar v-model="active" active-color="#000" route >
    <van-tabbar-item icon="sign" to="/Recommend">
      推荐
      <span v-if="active === 0" class="dot"></span>
    </van-tabbar-item>
    <van-tabbar-item icon="home-o" to="/">
      主页
      <span v-if="active === 1" class="dot"></span>
    </van-tabbar-item>
    <van-tabbar-item icon="setting-o" to="/Personal">
      我的
      <span v-if="active === 2" class="dot"></span>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const active = ref(1)

// 定义路由路径到 active 索引的映射
const routeMap = {
  '/Recommend': 0,
  '/': 1,
  '/Personal': 2
}

// 监听路由变化
watch(() => route.path, (newPath) => {
  if (routeMap[newPath] !== undefined) {
    active.value = routeMap[newPath]
  }
}, { immediate: true })
</script>

<style scoped>
.van-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* 设置较高的 z-index 值 */
}

.van-tabbar-item {
  z-index: 1;
}

.dot {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: -1;
  /* 定位到标签后面 */
  transform: translate(-75%, -80%);
  border-radius: 50%;
  background: #d7ff47;
}
</style>
